<template>
    <div class="employee-register">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="员工注册" left-arrow @click-left="$router.push('/')" class="nav-bar" />

        <!-- 注册表单 -->
        <van-form @submit="onSubmit" class="register-form">
            <!-- 基本信息表单 -->
            <van-cell-group inset>
                <van-field v-model="formData.name" name="name" label="姓名" placeholder="请输入姓名"
                    :rules="[{ required: true, message: '请输入姓名' }]" />
                <van-field v-model="formData.phone" name="phone" label="手机号" placeholder="请输入手机号"
                    :rules="[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]" />
                <van-field v-model="formData.verifyCode" name="verifyCode" label="验证码" placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请输入验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" @click="sendVerifyCode" :disabled="cooldown > 0">
                            {{ cooldown > 0 ? `${cooldown}秒后重试` : '获取验证码' }}
                        </van-button>
                    </template>
                </van-field>
            </van-cell-group>

            <!-- 底部按钮 -->
            <div class="form-buttons">
                <van-button block type="default" @click="onReset">重置</van-button>
                <van-button block type="primary" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    name: 'EmployeeRegister',
    data() {
        return {
            formData: {
                name: '',
                phone: '',
                verifyCode: ''
            },
            cooldown: 0
        }
    },
    methods: {
        sendVerifyCode() {
            // 开始倒计时
            this.cooldown = 60
            const timer = setInterval(() => {
                this.cooldown--
                if (this.cooldown <= 0) {
                    clearInterval(timer)
                }
            }, 1000)

            // TODO: 调用发送验证码的API
            console.log('发送验证码到手机:', this.formData.phone)
        },
        onSubmit(values) {
            // TODO: 处理表单提交逻辑
            console.log('表单提交:', values)
        },
        onReset() {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = ''
            })
        }
    }
}
</script>

<style scoped>
.employee-register {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.nav-bar {
    background: linear-gradient(135deg, #2c5282, #4a90e2);
    --van-nav-bar-title-text-color: white;
    --van-nav-bar-icon-color: white;
    --van-nav-bar-height: 50px;
    --van-nav-bar-title-text-size: 30px;
    --van-nav-bar-title-line-height: 50px;
    --van-nav-bar-icon-size: 26px;
}

.register-form {
    padding: 20px 0;
}

.form-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 0 16px;
}

.form-buttons .van-button {
    flex: 1;
}
</style>